<template>
  <div class="examQuestion">
    <Header></Header>
    <div class="bgcolor">
      <div class="wrap exam flex">
        <div class="question">
          <div class="left_top model">
             <div class="pb">{{name}}</div>
             <el-tabs v-model="activeName" @tab-click="handleClick" style="width:100%">
                <el-tab-pane label="练习模式" name="first">
                      <div class="question_list"  v-if="list">
                        <div class="question_title" >  {{list[index].title}}  </div>
                        <div v-if="list[index].type!=2">
                            <ul v-for="(opt,idx) in list[index].options" :key="idx"  @change="handleRadioChanges(idx,opt.value)" >
                            <li>
                          <!-- 单选 -->
                            <el-radio-group v-model="radio" >
                              <el-radio :label="opt.name" data-index="idx" > {{opt.value}}. {{opt.name}}</el-radio>
                            </el-radio-group>
                          </li>
                            </ul>
                        </div>
                        <div v-else>
                          <ul v-for="(opt,idx) in list[index].options" :key="idx"  @change="Changes(idx,opt.value)" >
                            <li>
                            <el-checkbox-group v-model="checkList" >
                                <el-checkbox :label="opt.label"> {{opt.value}}. {{opt.name}}</el-checkbox>
                            </el-checkbox-group>
                            </li>
                          </ul>
                        </div>
                    </div>
                    <el-row  type="flex" class="row-bg" justify="center" style="margin-top:50px">
                      <el-col :span="5"><el-button type="info" plain  @click="preOne">上一题</el-button></el-col>
                      <el-col :span="5"><el-button type="primary" v-if="index+1!=list.length" @click="nextOne">下一题</el-button></el-col>
                    </el-row>
                </el-tab-pane>
                  <el-tab-pane label="背题模式" name="second">
                       <div class="question_list" >
                        <div class="question_title" > {{list[index].title}}  </div>
                        <div v-if="list[index].type!=2">
                            <ul v-for="(opt,idx) in list[index].options" :key="idx"  @change="handleRadioChanges(idx,opt.value)" >
                            <li>
                          <!-- 单选 -->
                            <el-radio-group v-model="radio" >
                              <el-radio :label="opt.value" data-index="idx" > {{opt.value}}. {{opt.name}}</el-radio>
                            </el-radio-group>
                          </li>
                            </ul>
                        </div>
                        <div v-else>
                          <ul v-for="(opt,idx) in list[index].options" :key="idx"  @change="checkboxChanges(idx,opt.value)" >
                            <li>
                            <el-checkbox-group v-model="checkList" >
                                <el-checkbox :label="opt.label" > {{opt.value}}. {{opt.name}}</el-checkbox>
                            </el-checkbox-group>
                            </li>
                          </ul>
                        </div>
                        
                    <p style="padding:30px">正确答案：<span style="color:green">{{list[index].answer}}</span></p>
                    </div>
                    <el-row  type="flex" class="row-bg" justify="center" style="margin-top:50px">
                      <el-col :span="5"><el-button type="info" plain  @click="preOne">上一题</el-button></el-col>
                      <el-col :span="5"><el-button type="primary" v-if="index+1!=list.length" @click="nextOne">下一题</el-button></el-col>
                    </el-row>
                </el-tab-pane>
             </el-tabs>
          </div>
         
        </div>
        <div class="scantron">
          <div class="dtk clearfix">
            <div class="dtk_left">
              <img src="@/assets/images/dtk.png" alt="" /> 答题卡
            </div>
            <div class="dtk_right">
              <span class="circle"></span> 未做答
              <span class="circle ok"></span> 对
              <span class="circle error"></span> 错
            </div>
          </div>
          <div class="numbers" v-if="list[index].type==1">
            <p style="padding: 10px 0" class="font20">单选题</p>
            <div class="biao">
              <span v-for="(item,index) in list" :key="index">{{index+1}}</span>
            </div>
          </div>
          <div class="numbers" v-if="list[index].type==2">
            <p style="padding: 10px 0" class="font20">多选题</p>
            <div class="biao">
             <span v-for="(item,index) in list" :key="index">{{index+1}}</span>
            </div>
          </div>
          <div class="numbers" v-if="list[index].type==3">
            <p style="padding: 10px 0" class="font20">判断题</p>
            <div class="biao">
             <span v-for="(item,index) in list" :key="index">{{index+1}}</span>
            </div>
          </div>
          <el-row style="text-align: center; margin-top: 30px">
            <el-button type="primary" class="btn" @click="dialogVisible = true"
              >结束练习</el-button
            >
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <div style="text-align:center;">
        <img src="@/assets/images/sucess.png" alt="" class="expression" />
         <!-- <img src="@/assets/images/miss.png" alt="" class="expression" /> -->
        <span class="font24" style="padding-bottom: 20px; display: block;margin-top: 83px;"
          >成绩合格</span
        >
        <p class="font20">
          你还剩 <span class="red">1</span> 题未做，答错
          <span class="red">1</span> 题
        </p>
        <p class="font20">考试得 <span class="red">96</span>分</p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">继续答题</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确认交卷</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Header from "@/components/layout/header.vue";
export default {
  components: {
    Header,
  },
  data() {
    return {
      name:'',
      dialogVisible: false,
      radio:'1',
      activeName:'first',
      checkList:[],
      id:'',
      list:[],
      index:0,
      lm_id:1,
      isRight:false,
    };
  },
  mounted(){
    // let {type,lm_id,id,name} = this.$route.query
    this.type = this.$route.query.type
    this.lm_id = this.$route.query.lm_id
    this.id = this.$route.query.id
    this.name= this.$route.query.name
    this.getData()
    console.log(this.index)
  },
  methods:{
   
    getData(){
      this.$axios.post("/api/Answers/exercise",{t_id:this.id}).then(res=>{
        this.list = res.data.data
        console.log("===",res.data.data[0].type)
        // console.log(res.data)
      })

      
    },
     handleClick(val) {
      console.log(val)
    },
     handleRadioChanges(index,strnum){//index,选中题目的下标，strnum你选中的那个选项，实际上也是个index
          console.log(index,strnum)
        },
    preOne(){
      if(this.index>0){
        this.index -=1
      }
    },
     nextOne() {
       let {index} = this
       if(index+1<this.list.length){
          this.index +=1
       }
    },
  }
};
</script>
<style scoped>
.bgcolor {
  background: #f5f5f5;
  padding: 30px 0;
}
.exam {
  position: relative;
}
.question {
  width: 69%;
  margin-right: 20px;
  padding: 20px 10px;
  background-color: white;
}
.left_top{
  display: flex;
  justify-content: space-between;
  /* border-bottom: 1px solid #E1E1E1; */
  position: relative;
}
.pb{
  position: absolute;
  font-size: 20px;
}
/* .question,
.scantron {
  padding: 20px 10px;
  background-color: white;
} */
.question_title {
  margin-bottom: 10px;
  font-weight: bold;
}
.question_list {
  margin-bottom: 15px;
}
.question_list ul li {
  padding: 10px;
}
.scantron {
  width: 329px;
  padding: 20px 10px;
  box-sizing: border-box;
  background-color: white;
  
}
.circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #979797;
  display: inline-block;
}

.dtk {
  margin-top: 10px;
}
.dtk_left {
  float: left;
  font-size: 16px;
}
.dtk_left img {
  display: inline-block;
  vertical-align: middle;
}
.dtk_right {
  float: right;
}
.ok {
  background-color: #FF3E44;
}
.error {
  background-color: #31D274!important;
}
.red {
  color: red!important;
}
.numbers .biao span {
  display: inline-block;
  margin: 0 10px 10px 0;
  width: 29px;
  height: 29px;
  line-height: 29px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  background-color: #979797;
}
.btn {
  text-align: center;
  font-size: 20px;
  width: 240px;
}
.expression{
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -150px;
    margin-top: -122px;
}
.flex{
  display: flex;
}
</style>
<style>
 .model .el-tabs__nav{
    float: none;
    text-align: right;
  }
</style>